<!DOCTYPE html>
<html lang="zh-CN">

<head>

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">


  <title>{% block title %}{% endblock %}——技术博客</title>


  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&family=Source+Code+Pro:wght@400;600&display=swap" rel="stylesheet">
  <link rel="stylesheet" href="{% static 'css/base.css' %}">

  <script src="{% static 'js/base.js' %}"></script>


  {% block head %}{% endblock %}


</head>


<body>



{#导航栏#}
<header>
  <div class="container header-content">
    <div class="logo">
      <i class="fas fa-laptop-code"></i>
      <h1>Tech<span>Sphere</span></h1>
    </div>

    <nav>
      <ul>
        <li><a href="{% url 'blog:index' %}" class="active">首页</a></li>
        <li><a href="{% url 'blog:articles' page_id=1 %}">文章</a></li>
        <li><a href="{% url 'blog:blog_pub' %}">发布</a></li>
        <li><a href="{% url 'blog:detail' blog_id=28 %}">关于</a></li>
      </ul>
    </nav>

    {% if user.is_authenticated %}
      <div class="auth-buttons">
        <a href="{% url 'myauth:logout' %}" class="btn btn-outline">退出登录</a>
      </div>

    {% else %}
      <div class="auth-buttons">
        <a href="{% url 'myauth:login' %}" class="btn btn-outline">登录</a>
        <a href="{% url 'myauth:register' %}" class="btn btn-primary">注册</a>
      </div>
    {% endif %}

  </div>
</header>


{% block hero %}{% endblock %}


{# 主体部分 #}
<div class="container main-content">

  {% block main %}{% endblock %}

  {# 侧边栏 #}
  <aside class="sidebar">
    <!-- Author Info -->
    <div class="sidebar-widget">
      <div class="author-info">
        <div class="author-avatar">
          <i class="fas fa-user"></i>
        </div>
        <h3 class="author-name">芦恩准</h3>
        <p class="author-bio">武汉大学 | 大一新生 | 计算机爱好者。热爱分享前沿技术知识和实践经验。</p>
      </div>
    </div>

    <!-- Categories -->
    <div class="sidebar-widget">
      <h3 class="widget-title"><i class="fas fa-folder"></i> 文章分类</h3>
      <ul class="categories-list">
        <li><a href="{% url 'blog:articles' page_id=1 %}">python</a></li>
        <li><a href="{% url 'blog:articles' page_id=1 %}">C/C++</a></li>
        <li><a href="{% url 'blog:articles' page_id=1 %}">人工智能 </a></li>
        <li><a href="{% url 'blog:articles' page_id=1 %}">database </a></li>
        <li><a href="{% url 'blog:articles' page_id=1 %}">前端 </a></li>
        <li><a href="{% url 'blog:articles' page_id=1 %}">其他 </a></li>
      </ul>
    </div>


    <!-- Popular Posts -->
    <div class="sidebar-widget">
      <h3 class="widget-title"><i class="fas fa-fire"></i> 热门文章</h3>
      <div class="popular-posts">



        <div class="post">
          <div class="post-img">
            <i class="fab fa-vuejs"></i>
          </div>
          <div class="post-content">
            {# 链接、文字 #}
            <h4><a href="{% url 'blog:detail' blog_id=28 %}">关于本网站</a></h4>
            {# 日期 #}
            <div class="date">2025-08-19</div>
          </div>
        </div>



        <div class="post">
          <div class="post-img">
            <i class="fas fa-server"></i>
          </div>
          <div class="post-content">
            <h4><a href="{% url 'blog:detail' blog_id=11 %}">Django ORM 高级技巧与性能优化</a></h4>
            <div class="date">2025-08-19</div>
          </div>
        </div>



        <div class="post">
          <div class="post-img">
            <i class="fas fa-lock"></i>
          </div>
          <div class="post-content">
            <h4><a href="{% url 'blog:detail' blog_id=13 %}">神经网络基础概念与深度学习原理</a></h4>
            <div class="date">2025-08-19</div>
          </div>
        </div>



      </div>
    </div>
  </aside>
</div>







<!-- Footer -->
<footer>
  <div class="container">
    <div class="footer-content">
      <div class="footer-widget">
        <h3>关于 TechSphere</h3>
        <p>TechSphere 致力于分享相关的技术文章、教程和实践经验</p>
      </div>

      <div class="footer-widget">
        <h3>快速链接</h3>
        <ul class="footer-links">
          <li><a href="/"><i class="fas fa-chevron-right"></i> 首页</a></li>
          <li><a href="{% url 'blog:articles' page_id=1 %}"><i class="fas fa-chevron-right"></i> 所有文章</a></li>
        </ul>
      </div>

      <div class="footer-widget">
        <h3>联系我</h3>
        <ul class="footer-links">
          <li><i class="fas fa-envelope"></i> 2171342383@qq.com</li>
          <li><i class="fab fa-github"></i> 电话：15537291885</li>
          <li><i class="fab fa-twitter"></i> QQ: 2171342383</li>
          <li><i class="fab fa-discord"></i> 微信：Fun_Time_COME--</li>
        </ul>
      </div>
    </div>

    <div class="copyright">
      &copy;  TechSphere 技术博客
    </div>
  </div>
</footer>



</body>


</html>